<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { getHelpDetail } from '@/api/user';
import { ref } from 'vue';
import { useRouter } from '@/router';
import { useLocale } from '@/locale/locale';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const router = useRouter();
const statusBarH = ref(0);
const detail = ref({
  title: '',
  content: ''
});

const tagStyle = ref({
  p: 'font-weight: 400;font-size: 28rpx;color: #3D3D3D;line-height: 40rpx;',
  span: 'font-weight: 400;font-size: 28rpx;color: #3D3D3D;line-height: 40rpx;'
});

async function getDetail(id: number) {
  const res = await getHelpDetail(id);
  detail.value = res.data;
}

onLoad(async (options) => {
  uni.getSystemInfo({
    success: (res) => {
      statusBarH.value = res.statusBarHeight || 0;
    }
  });

  getDetail(options!.id);
});
</script>

<template>
  <uni-nav-bar
    v-if="isWechat()"
    :border="false"
    :title="t('LAKey_helpDetail')"
    fixed
    left-icon="left"
    status-bar
    @click-left="router.back"
  />
  <view
    :style="{ minHeight: 'calc(100vh - 44px - 20rpx - ' + statusBarH + 'px)' }"
    class="detail-contain"
  >
    <view class="detail-contain-title">{{ detail.title }}</view>
    <view class="detail-contain-cont">
      <uv-parse :content="detail.content" :tagStyle="tagStyle"></uv-parse>
    </view>
    <view class="detail-contain-bottom">
      {{ t('LAKey_notFoundAnswer') }}
      <text>{{ t('LAKey_findOnlineCustomerService') }}</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.detail {
  &-contain {
    margin-top: 20rpx;
    background: #ffffff;
    border-radius: 16rpx;

    &-title {
      border-bottom: 1px solid #f4f4f4;
      padding: 32rpx;
      font-weight: 500;
      font-size: 36rpx;
      color: #3d3d3d;
      line-height: 50rpx;
    }

    &-cont {
      padding-left: 32rpx;
      padding-top: 32rpx;
      padding-right: 32rpx;
      padding-bottom: 140rpx;
      padding-bottom: calc(constant(safe-area-inset-bottom) + 140rpx);
      padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
    }

    &-bottom {
      background: #ffffff;
      z-index: 9999;
      position: fixed;
      left: 0;
      right: 0;
      height: 108rpx;
      border-top: 1px solid #f4f4f4;
      bottom: 0;
      bottom: constant(safe-area-inset-bottom);
      bottom: env(safe-area-inset-bottom);
      line-height: 108rpx;
      text-align: center;
      font-weight: 400;
      font-size: 28rpx;
      color: #979797;

      text {
        color: #0075f0;
      }
    }
  }
}
</style>
